<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 数据绑定 -->
      <div>count值:{{ count }}</div>
      <!-- 运算 不推荐直接在模板中来完成计算工作 -->
      <div>{{ 1 + 1 }}</div>
      <!-- 调用原生js中的方法 -->
      <div>{{ 'abcdef'.slice(0,2) }}</div>
      <!-- 调用vue中定义的方法,但是它不能调用全局或外部方法 -->
      <div>{{ print() }}</div>
      <!-- 三目运算 -->
      <div>{{ age<=10?'儿童':'老年' }}</div>
      <!-- 短语运算 -->
      <div>{{ a || 'aa' }}</div>
      <!-- 可选链 xx?.yy  xx为真且有yy属性，则执行 -->
      <div>{{ user?.name }}</div>
      <!-- 
        注：{{}}模板语法中，不能声明变量，不能定义函数，还不能使用 if while for等js语句
       -->
    </div>
    <script>
      // app._instance.data 获取到响应数据
      const app = Vue.createApp({
        data() {
          return {
            count: 100,
            age: 11,
            a: null,
            user: {name:'aaa'}
          }
        },
        // methods配置，专门用来定义vue模板中调用的方法
        // methods中定义的方法它不会进行数据的监听
        // methods中定义的方法一定要用function定义
        //  + 在methods里面定义的子方法或回调函数，则一定要用箭头函数来保证使用时，this指向正确
        methods: {
          // print: () => {
          //   // 在非严格模式下this指向到window
          //   // 在严格模式下指向到undefined
          //   console.log(this)
          //   return 'hello -- ' + this.count
          // }

          // 在methods配置中定义的方法，一定要用function来定义，这样才能保证this指向正确
          // print: function () {
          //   console.log(this)
          //   return 'hello -- ' + this.count
          // }
          // 简写，推荐写法
          print() {
            setTimeout(() => {
              console.log(this.count)
            }, 1000)
            return 'hello --   ' + this.count
          }
        }
      })
      app.mount('#app')

      // new Proxy(this,{
      //   get(target,key){
      //     return target._instance.data[key]
      //   }
      // })

      // function print() {
      //   return 'hello'
      // }
    </script>
  </body>
</html>
